<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选练习</title>
    <script type="text/javascript">
        window.onload = function(){
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            var  items=document.getElementsByName("items");
            var checkedAllBox=document.getElementById("checkedAllBox");
//全选
            checkedAllBtn.onclick=function () {
                for (var i=0;i<items.length;i++){
                    //通过多选框的checked属性可以获取或设置多选框的状态
                    items[i].checked=true;
                }
                checkedAllBox.checked=true;
            };
//全不选
            var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function () {
                for (var i=0;i<items.length;i++){
                    //通过多选框的checked属性可以获取或设置多选框的状态
                    items[i].checked=false;
                }
                checkedAllBox.checked=false;
            };
//反选
            var checkedRevBtn=document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick=function () {
                checkedAllBox.checked = true;
                for (var i = 0; i < items.length; i++) {
                    //通过多选框的checked属性可以获取或设置多选框的状态
                    // if (items[i].checked){
                    //     items[i].checked=false;//证明多选框已选中，则设置为选中状态
                    // }else{
                    //     items[i].checked=true;//证明多选框未选中，则设置为选中状态
                    // }
                    items[i].checked = !items[i].checked;
                    if (!items[i].checked) {
                        //一旦进入判断则证明不是全选状态， 将checkedAllBox设置为没选中状态
                        checkedAllBox.checked = false;
                    }
                }

            };
            //点击提交按钮，将所有选中的多选框的value属性值弹出
            var sendBtn=document.getElementById("sendBtn");
            sendBtn.onclick=function (){
                for (var i=0;i<items.length;i++){
                    if(items[i].checked){
                    alert(items[i].value);
                    }
                }
            };
//点击全选时 其余的选中 取消时其余的也取消
            checkedAllBox.onclick=function () {
                for (var i=0;i<items.length;i++) {
                    // alert(checkedAllBox==this);
                    //在事件的响应函数中，单击响应函数是给谁绑定的this就是谁
                    items[i].checked=this.checked;
                }
            };
//如果四个多选框全部选中，则checkedAllBox也应该选中
//如果四个多选框全部未选中，则checkedAllBox也应该不选中
//为四个多选框绑定单击响应函数
            for(var i=0;i<items.length;i++){
                items[i].onclick=function () {
                    //checkedAllBox设置为选中状态
                checkedAllBox.checked=true;
                console.log(checkedAllBox);
                 for (var j=0;j<items.length;j++){
                         //判断四个多选框是否被选中，只要有一个没选中 就不全选
                         if (!items[j].checked) {
                             //一旦进入判断则证明不是全选状态， 将checkedAllBox设置为没选中状态
                         checkedAllBox.checked=false;
                         break;
                        }
                  }
                }
            }
        };
    </script>
</head>
<body>
<script>
    /*  this的四种方法:
    *     1.函数调用时，this就是window
    *     2.对象的方法调用时，this就是调用方法的对象
    *     3.构造函数调用时，this就是新创建的对象
    *     4.apply()和call()调用时 this就是传进来的第一个参数
    *     5.在事件的响应函数中，单击响应函数是给谁绑定的this就是谁
    * */
</script>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全　选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反　选" />
    <input type="button" id="sendBtn" value="提　交" />
</form>
</body>
</html>